<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBaiseJMkicK8HUDMfLivvjI3bMFHYeaMs&sensor=false"></script>
<script src="data/data.json" type="text/javascript"></script>
<script src="scripts/markerclusterer.js" type="text/javascript"></script>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<!-- <script src="scripts/script.js"></script>  -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<title>Twitter usage statistics</title>

<script type="text/javascript">
	function initialize() {
		var mapOptions = {
			center : new google.maps.LatLng(51.508742, -0.120850),
			zoom : 5,
			minZoom : 5,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("googleMap"),
				mapOptions);
		var viewportBox;

		google.maps.event.addListener(map, 'idle', function(event) {
			var bounds = map.getBounds();

			var ne = bounds.getNorthEast();
			var sw = bounds.getSouthWest();

			var viewportPoints = [ ne,
					new google.maps.LatLng(ne.lat(), sw.lng()), sw,
					new google.maps.LatLng(sw.lat(), ne.lng()), ne ];

			if (viewportBox) {
				viewportBox.setPath(viewportPoints);
			} else {
				viewportBox = new google.maps.Polyline({
					path : viewportPoints,
					strokeColor : '#FF0000',
					strokeOpacity : 1.0,
					strokeWeight : 4
				});
				viewportBox.setMap(map);
			}
			;
			var northlat = document.getElementById('northlat');
			northlat.value = ne.lat();
			var southlat = document.getElementById('southlat');
			southlat.value = sw.lat();
			var northlng = document.getElementById('northlng');
			northlng.value = ne.lng();
			var southlng = document.getElementById('southlng');
			southlng.value = sw.lng();
		});

		var markers = [];
		for ( var i = 0; i < 1093; i++) {
			var latLng = new google.maps.LatLng(data.photos[i].latitude,
					data.photos[i].longitude);
			var marker = new google.maps.Marker({
				'position' : latLng
			});
			markers.push(marker);
		}

		var mc = new MarkerClusterer(map, markers);
	}
	google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
	$(function() {
		$("#datepicker1").datepicker();
	});
</script>
<script>
	$(function() {
		$("#datepicker2").datepicker();
	});
</script>
<script>
	function getCheckAndSendRequest() {
		var region = document.optionsform.region.value;
		var startDate = document.optionsform.date1.value;
		var endDate = document.optionsform.date2.value;
		var startClock = document.optionsform.clock1.value;
		var endClock = document.optionsform.clock2.value;
		var nlat = document.optionsform.northlat.value;
		var slat = document.optionsform.southlat.value;
		var nlng = document.optionsform.northlng.value;
		var slng = document.optionsform.southlng.value;
		if (region == "none" || startDate == "" || endDate == ""
				|| startClock == "" || endClock == "") {
			alert("ReCheck Options. Have you selected region and filled all the fields?");
		} else {
			document.myform2.textarea.value = Date() + "\n" + region + "\n"
					+ startDate + "\n" + endDate + "\n" + startClock + "\n"
					+ endClock + "\n" + nlat + " " + nlng + "\n" + slat + " " + slng + "\nLatitude: " + slat + " kuni " + nlat + "\nLongitude: " + slng + " kuni " + nlng;
		}
	}
</script>

</head>
<body>

	<div id="googleMap"></div>

	<div class="alignleft">
		<div id="header">
			<h1>Tweeting Hotspots</h1>
		</div>
		<div id="options">
			<div id="optionscontent">
				<h2 id="optionsheader">Options</h2>
				<form name="optionsform">
					<select name="region" id="region">
						<option value="none">Select Region</option>
						<option value="africa">Africa</option>
						<option value="asia">Asia</option>
						<option value="europa">Europa</option>
						<option value="na">North America</option>
						<option value="sa">South America</option>
						<option value="oceania">Oceania</option>
					</select>

					<h4 id="selecttimegaptext">Select time gap</h4>
					<p>
						<b>Date</b> From <input name="date1" class="datepicker"
							type="text" id="datepicker1" /> to <input name="date2"
							class="datepicker" type="text" id="datepicker2" /> <br> <b>Clock</b>
						From <input name="clock1" class="time" type="text" id="time1"
							value="00:00" /> to <input name="clock2" class="time"
							type="text" id="time2" value="23:59" />
					</p>
					<input name="northlat" id="northlat" type="hidden" value="125">
					<input name="southlat" id="southlat" type="hidden" value="135">
					<input name="northlng" id="northlng" type="hidden" value="145">
					<input name="southlng" id="southlng" type="hidden" value="155">
				</form>
				<button id="getresults" onclick="getCheckAndSendRequest()">Get
					Hotspots</button>
				<p>
			</div>
		</div>
		<div id="resultsarea">
			<div id="textarea">
				<form name="myform2">
					<h2>About / Results</h2>
					<textarea name="textarea" id="textfield" rows="23" cols="47"
						readonly="readonly" disabled="disabled" draggable="false">Get statistics about tweeting in regions. Choose a Region, time gap and press "Get Results". Also you can zoom on the map to get more detailed information about the hotspots.</textarea>
				</form>
			</div>
		</div>
	</div>



</body>
</html>